<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="框架计划编码" prop="planCode">
                <el-input v-model="queryParams.planCode" placeholder="请输入框架计划编码" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="计划名称" prop="planName">
                <el-input v-model="queryParams.planName" placeholder="请输入计划名称" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <!--        <router-link to="frameworkPlan"></router-link>-->
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
                </el-button>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待提交" name="waitSubmit">
                <el-table v-loading="loading" :data="framewokPlanList">
                    <el-table-column label="框架计划编码" align="center" prop="planCode" />
                    <el-table-column label="框架计划名称" align="center" prop="planName" />
                    <el-table-column label="预算(含税)/元" align="center" prop="planBudget" />
                    <el-table-column label="创建部门" align="center" prop="deptId" />
                    <el-table-column label="计划状态" align="center" prop="planStatus">
                        <template>
                            <el-tag>待提交</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                            </el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                            </el-button>
                            <el-button size="mini" type="text" @click="showFrameworkDetails(scope.row)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="待审批" name="waitProcess">
                <el-table v-loading="loading" :data="framewokPlanList">
                    <el-table-column label="框架计划编码" align="center" prop="planCode" />
                    <el-table-column label="框架计划名称" align="center" prop="planName" />
                    <el-table-column label="预算(含税)/元" align="center" prop="planBudget" />
                    <el-table-column label="创建部门" align="center" prop="deptId" />
                    <el-table-column label="计划状态" align="center" prop="planStatus">
                        <template>
                            <el-tag type="danger">待审批</el-tag>
                        </template>
                    </el-table-column>
                    <!--          <el-table-column label="审批人" align="center" prop="jhPerson"/>-->
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="showFrameworkDetails(scope.row)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="alreadyComplate">
                <el-table v-loading="loading" :data="framewokPlanList">
                    <el-table-column label="框架计划编码" align="center" prop="planCode" />
                    <el-table-column label="框架计划名称" align="center" prop="planName" />
                    <el-table-column label="预算(含税)/元" align="center" prop="planBudget" />
                    <el-table-column label="创建部门" align="center" prop="deptId" />
                    <el-table-column label="计划状态" align="center" prop="planStatus">
                        <template>
                            <el-tag type="success">已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="审批人" align="center" prop="planFounder" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="showFrameworkDetails(scope.row)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <el-dialog @close="cancel" :title="title" :visible.sync="open" width="1000px" append-to-body>
            <el-tabs @tab-click="tabHandleClick" v-model="tabPaneName">
                <el-tab-pane label="采购框架" name="basic">
                    <el-descriptions direction="vertical" class="margin-top" title="查看框架详情" :column="3" size="medium"
                        border>
                        <el-descriptions-item>
                            <template slot="label"> 框架计划名称 </template>
                            {{ form.planName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 框架计划预算 </template>
                            {{ form.planBudget }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 部门 </template>
                            {{ form.deptName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 采购方式 </template>
                            {{ form.planMethodName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 框架计划状态 </template>
                            <el-tag v-if="form.planStatus == 1">待提交</el-tag>
                            <el-tag v-if="form.planStatus == 2">待审核</el-tag>
                            <el-tag v-if="form.planStatus == 3">已生效</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 审批人 </template>
                            <span v-if="form.planPerson != null && form.planPerson != ''">
                                {{ form.planPerson }}
                            </span>
                            <span style="color: #cccccc" v-else> 未审核 </span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label"> 创建人 </template>
                            {{ form.planFounder }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label"> 业务类型 </template>
                            <span v-for="item in dict.type.business_type" :key="item.value">
                                <template v-if="item.value == form.businessType">
                                    {{ item.label }}
                                </template>
                            </span>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label"> 供应商 </template>
                            {{ form.supplier.hName }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label"> 附件 </template>
                            <el-collapse>
                                <el-collapse-item v-for="(item, index) in fileList" :key="index" :title="item.anName">
                                    <el-button type="primary" @click="downloadMethod(item)">
                                        下载 {{ item.anName }} <i class="el-icon-download"></i>
                                    </el-button>
                                </el-collapse-item>
                            </el-collapse>
                            <!-- <p v-for="i in fileList" :key="i">
                                <a :href="i.anUrl[i - 1]">{{ i.anName[i - 1] }}</a>
                            </p> -->
                        </el-descriptions-item>
                    </el-descriptions>
                    <!-- 行项目 -->
                    <el-table border @cell-click="" max-height="250" v-loading="loading" :data="form.lineItemsList"
                        style="margin-top: 20px">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-descriptions border>
                                    <el-descriptions-item label="产品名称">{{
                                        props.row.csDevice.tName
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="计量单位">{{
                                        props.row.csDevice.tUnit
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="税率">{{
                                        props.row.csDevice.taxRate
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="类别">
                                        <el-tag size="small">{{ props.row.csDevice.cType }}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="需求说明">{{ props.row.csDevice.tIllustrate }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="规格型号">{{
                                        props.row.csDevice.tModel
                                        }}</el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-table-column>
                        <el-table-column label="行项目编号" align="center" prop="vCode" width="160" />
                        <el-table-column label="数量" align="center" prop="vCount" />
                        <el-table-column label="采购人" align="center" prop="vPerson" />
                        <el-table-column label="交付时间" align="center" prop="vDeliveryTime" width="180">
                            <template slot-scope="scope">
                                <span>{{
                                    parseTime(scope.row.vDeliveryTime, "{y}-{m}-{d}")
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交付地点" align="center" prop="vDeliveryArea" width="150" />
                        <el-table-column label="需求说明" align="center" prop="vIllustrate" width="120" />
                        <!--        <el-table-column label="采购方式" align="center" prop="procurementMethod"/>-->
                    </el-table>
                    <div class="dialog-footer">
                        <div style="display: inline-block; margin-right: 10px">
                            <!-- v-has-permi="['system:procurement:allow']" -->
                            <el-button @click="allowFarmeworkPlan" v-if="form.planStatus == 2"
                                type="success">通过</el-button>
                            <el-button @click="rejectFarmeworkPlan" v-if="form.planStatus == 2"
                                type="danger">驳回</el-button>
                        </div>
                        <el-button @click="sumbitFarmeworkPlan" v-if="form.planStatus == 1" type="primary">提
                            交</el-button>
                        <el-button @click="loading = false" v-if="form.planStatus == 1" type="primary">关闭
                        </el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="审核记录" name="processed">
                    <el-steps space="200" simple :active="form.planStatus - 1">
                        <el-step title="待提交"></el-step>
                        <el-step title="待审核"></el-step>
                        <el-step title="已生效"></el-step>
                    </el-steps>
                    <el-table style="margin-top: 20px" max-height="250" v-loading="planLoading" :data="planNode">
                        <el-table-column label="序号" align="center" prop="rid">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="处理人" align="center" prop="planPerson">
                            <template slot-scope="scope">
                                <span>{{ scope.row.planPerson || scope.row.planFounder }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="所属部门" align="center" prop="deptName" />
                        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                            <template slot-scope="scope">
                                <span>{{ scope.row.createTime }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-tab-pane label="基础资料" name="basic"></el-tab-pane>
        </el-dialog>
    </div>
</template>

<script>
import {
    deleteFrameworkPlan,
    rejectFarmeworkPlanWay,
    getFrameworkPlan,
    getFrameworkPlanDetails,
    getCSType,
    upSubmitFrameworkPlan,
    allowFarmeworkPlan,
    getSupplierList,
} from "@/api/system/purchase";
import { listDept } from "@/api/system/dept";
export default {
    dicts: ["business_type", "device_type", "purchase_method"],
    data() {
        return {
            tabPaneName: "basic",
            planNode: [], //框架计划节点
            planLoading: false,
            activeName: "waitSubmit",
            framewokPlanList: [],
            deptList: [],
            // 遮罩层
            loading: true,
            paneName: "basic",
            open: false,
            showSearch: true, //展示搜索条件
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                planCode: null,
                planName: null,
                planStatus: 1,
            },
            fileList: [], //文件列表
            lineItems: [],
            form: {
                planCode: "",
                planName: "",
                planBudget: null,
                deptName: "", //通过deptId转化后的值
                deptId: null,
                planFounder: "",
                planPerson: "",
                planStatus: "",
                planMethod: "",
                lineItemsList: [], //里面包含device
                supplier: {},
            },
            title: "采购框架计划", //弹窗标题
            // 总条数
            total: 0,
            tableData: {},
        };
    },
    methods: {
        //文件下载
        async downloadMethod(fileInfoL) {
            try {
                // 获取响应
                let response = await fetch(fileInfoL.anUrl);
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error("网络响应失败");
                }
                // 内容转变成blob地址
                let blob = await response.blob();
                // 创建隐藏的可下载链接
                let objectUrl = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.style.display = "none";
                a.href = objectUrl;
                a.download = fileInfoL.anName;
                // 触发点击
                document.body.appendChild(a);
                a.click();
                // 移除
                URL.revokeObjectURL(a.href);
                document.body.removeChild(a);
            } catch (error) {
                console.error("下载文件时出错:", error);
            }
        },
        onRest() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                planCode: null,
                planName: null,
                planStatus: this.queryParams.astate,
            };
        },
        //查询
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        tabHandleClick(activeName, oldActiveName) {
            switch (activeName.name) {
                case "basic":
                    this.tabPaneName = "basic";
                    break;
                case "processed":
                    this.tabPaneName = "processed";
                    if (this.planNode.length == 0) {
                        this.planNode.push(this.form);
                    }
                    break;
            }
        },
        resetQuery() {
            this.queryParams = {
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    // 搜索条件
                    planCode: null,
                    planName: null,
                    planStatus: 1,
                },
            };
        },
        handleAdd() {
            this.$router.push("/purchase/frameworkPlan/add");
        },
        getList() {
            this.loading = true;
            getFrameworkPlan(this.queryParams)
                .then((res) => {
                    this.loading = false;
                    this.framewokPlanList = res.rows;
                    this.total = res.total;
                })
                .catch((err) => {
                    this.$modal.msgError("服务器出错，请联系管理员！！！");
                });
        },
        handleDelete(row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteFrameworkPlan(row.planCode).then((res) => {
                        if (res.data == 1) {
                         this.framewokPlanList=this.framewokPlanList.filter(item=>item.planCode!=row.planCode)
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });

        },
        handleClick(activeName, oldActiveName) {
            switch (activeName.paneName) {
                case "waitSubmit":
                    this.queryParams.planStatus = 1;
                    break;
                case "waitProcess":
                    this.queryParams.planStatus = 2;
                    break;
                case "alreadyComplate":
                    this.queryParams.planStatus = 3;
                    break;
            }
            this.getList();
        },
        //跟进框架计划编码查询详细信息
        showFrameworkDetails(row) {
            getFrameworkPlanDetails(row.planCode)
                .then((res) => {
                    console.log(res,"收复失地");
                    
                    this.open = true;
                    this.form = res.csFramePlan;
                    this.lineItems = res.csFramePlan.lineItemsList;
                    this.form.supplier = res.supplier[0];
                    getCSType().then((res) => {
                        this.lineItems.forEach((ele) => {
                            res.data.forEach((ress) => {
                                if (ress.cId == ele.csDevice.cId) {
                                    this.$set(ele.csDevice, "cType", ress.cName);
                                }
                            });
                        });
                    });
                    this.fileList = res.file;
                    this.dict.type.purchase_method.forEach((ele) => {
                        if (ele.value == this.form.planMethod.toString()) {
                            this.form.planMethodName = ele.label;
                        }
                    });
                    if (res != null) {
                        this.deptList.forEach((dept) => {
                            if (dept.deptId == this.form.deptId) {
                                this.form.deptName = dept.deptName;
                                return;
                            }
                        });
                    }
                })
                .catch(() => {
                    this.$modal.msgError("出了点小问题,请稍候试试!!!");
                });
        },
        //部门列表
        getDeptList() {
            listDept().then((res) => {
                this.deptList = res.data; // 将获取的数据赋值给 deptList
            });
        },
        cancel() {
            this.open = false;
            setTimeout(() => {
                this.paneName = "basic";
            }, 500);
        },
        //同意框架计划
        allowFarmeworkPlan() {
            allowFarmeworkPlan(this.form.planCode)
                .then((res) => {
                    if (res.data > 0) {
                        this.$modal.msgSuccess("审核成功");
                        this.framewokPlanList.filter((item) => {
                            item.planCode != this.form.planCode;
                        });
                        this.cancel();
                    }
                })
                .catch((err) => {
                    this.$modal.msgError("审核失败,稍候再试");
                });
        },
        //驳回框架计划
        rejectFarmeworkPlan() {
            rejectFarmeworkPlanWay(this.form.planCode).then((res) => {
                console.log(this.form);
                this.framewokPlanList = this.framewokPlanList.filter((item) => {
                    item.planCode != this.form.planCode;
                });
                if (res.data == 1) {
                    this.$modal.msgSuccess("驳回成功!");
                    this.framewokPlanList.filter((item) => {
                        return item.planCode != this.form.planCode;
                    });
                    //
                } else {
                    this.$modal.msgError("驳回失败!");
                }
                this.cancel();
            });
        },
        //关闭弹窗
        cancelFramework() {
            this.open = false;
            this.form = {
                planCode: "",
                planName: "",
                planBudget: null,
                deptName: "", //通过deptId转化后的值
                deptId: null,
                planFounder: "",
                planPerson: "",
                planStatus: "",
                lineItemsList: [], //里面包含device
            };
            this.fileList = [];
        },
        //提交框架计划
        sumbitFarmeworkPlan() {
            upSubmitFrameworkPlan(this.form.planCode)
                .then((rse) => {
                    if (rse.data == 1) {
                        this.$modal.msgSuccess("提交成功");
                        this.framewokPlanList = this.framewokPlanList.filter(
                            (item) => item.planCode != this.form.planCode
                        );
                        this.cancel();
                    }
                })
                .catch((err) => {
                    console.log(err);

                    this.$modal.msgError("服务器出错，请联系管理员！！！");
                });
        },
        //编辑
        handleUpdate(row) {
            this.$router.push({
                path: "/purchase/frameworkPlan/add",
                query: {
                    planCode: row.planCode,
                },
            });
        },
    },
    mounted() {
        this.getList();
        this.getDeptList();
    },
};
</script>

<style scoped>
.searchBox {
    margin-left: 20px;
    /* 向右靠 */
    margin-top: 20px;
    /* 向右靠 */
}

.contentForm {
    width: 1200px;
    margin-left: 30px;
    /* 可选：进一步调整 */
    margin-top: 10px;
}

.dialog-footer {
    margin-left: 82.3%;
    margin-top: 4%;
}
</style>
